首页手记 jQuery之基础核心（demo)

jQuery之基础核心（demo)

标签：

JQuery JavaScript

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
</head>
<body>
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>
<div id="div1">慕课网</div>
<div id="div2"></div>
<ul>
    <li>Perona1</li>
    <li>Perona2</li>
    <li>Perona3</li>
    <li>Perona4</li>
    <li>Perona5</li>
    <li>Perona6</li>
    <li>Perona7</li>
</ul>
<div id="div3">爱慕客</div>
<div id="div4"></div>
<button id="btn1">点击a</button>
<button id="btn2">点击b</button>
<button id="btn3">点击c</button>
<button id="btn4">点击d</button>
<script>
    $(function(){
        //$是什么？
        console.log(typeof $); //function
        /*test();
        function test(){
            //...
        }*/
        console.log($===jQuery);    //true
        /*//强大的jQuery选择器
        //基本选择器
        $(*)    //获取所有元素
        $('#div1')  //获取ID名为div1的元素
                ...
        //属性选择器
        $("[href]") //获取所有带有 href 属性的元素
        $("[href='#']") //所有 href 属性的值等于 "#" 的元素
                ...
        //表单选择器
        $(":password")   // 获取type="password" 的 <input> 元素
        $(":button")    //获取type="button" 的 <input> 元素
                ...
        //位置选择器
        $("ul li:first-child") //获取所有ul中第一个子元素li
        $("ul li:last-child")   // 获取所有ul中最后一个子元素li
                ...
        //过滤选择器
        $(":empty") //获取无子（元素）节点的所有元素
        $("p:hidden")   //获取所有隐藏的 <p> 元素
                ...
        //用于结果集的选择器
        $('div').has('span'); // 获取包含span元素的div元素
        $('div').first(); //获取第1个div元素
                ...*/

        //方法函数化
        console.log($());  //Object
        console.log($() instanceof jQuery); //true
        console.log($('#p1') instanceof jQuery); //true
        //原生js
        document.getElementById('p2').innerHTML="Perona";
        //jQuery
        //$('#p3').html="Perona";//没任何效果
        $('#p3').html('佩罗娜');

        //取值与赋值
        alert($('#div1').html());   //html()没有参数，表示取值
        $('#div2').html("爱慕课");//html()有参数，表示赋值
        //获取结果包含多个元素
        alert($('li').html());//当一组元素的时候，取值是一组中的第一个
        $('li').html('佩罗娜');//当一组元素的时候,赋值是一组中的所有元素
        alert($('li').text());//特殊的text()取出所有元素内容

       //链式写法
        console.log($('#div3').css('color', 'red'));//object
        console.log($('#div3').css('color', 'red') instanceof jQuery);//true
        console.log($('#div3').css('color', 'red').html('imooc'));//object
        console.log($('#div3').css('color', 'red').html('imooc')instanceof jQuery);//true
        //一般写法
        //$('#div3').css('color', 'gold');
        //$('#div3').html('么么哒');
        //链式
        $('#div4').css('color', 'gold').html('么么哒');

       //jQuery与原生JS
        document.getElementById('btn1').onclick=(function(){
            alert('么么哒');
        });//js的写法
        $('#btn2').click(function(){
            alert('慕女神');
        });//jq的写法
        //错误写法
        /*document.getElementById('btn3').click(function(){
            alert('慕女神');
        })//错误滴~~
        $('#btn4').onclick=(function(){
            alert('么么哒');
        });//这也是错误滴~~~*/
    });
</script>
</body>
</html>

这是jQuery之基础核心一文的demo,有需要的同学可以把代码拷贝到本地运行测试下，感受一下。

点击查看更多内容